<template>
  <div>
    <div class="box" id="echarts_line"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { springQuantitySentChart } from "@/api/index.js";

let xdata = ref([]);
let ydata1 = ref([]);
let ydata2 = ref([]);
let ydata3 = ref([]);
let ydata4 = ref([]);
let dataList = ref([]);
function convertDateFormat(dateStr) {
  // 使用 split 方法将日期字符串按 "-" 分割，取最后两个部分
  let parts = dateStr.split("-");
  // 拼接成所需格式
  let result = parts[1] + "." + parts[2];
  return result;
}
function init(
  xdata,
  ydata1,
  ydata2,
  ydata3,
  ydata4,
  line11,
  line12,
  line13,
  line21,
  line22,
  line23,
  line31,
  line32,
  line33
) {
  let zhexian = echarts.init(document.getElementById("echarts_line"));
  let option = {
    title: {
      text: "客运趋势图",
      left: "center", // 将标题水平居中
      textStyle: {
        color: "#fff", // 设置标题的颜色为蓝色
        fontSize: 18,
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(32, 55, 85, 0.7)",
      borderColor: "rgba(0, 240, 255, 0.7)",

      textStyle: {
        color: "#B5C5D4", // 图例文字颜色
        textAlign: "left", // 设置文字左靠齐
      },
      axisPointer: {
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: function (parms) {
        var str =
          parms[0].axisValueLabel +
          `(春运第${parms[0].dataIndex + 1}天)` +
          "<br>" +
          parms[0].marker +
          parms[0].seriesName +
          "：" +
          parms[0].value +
          "万人次" +
          "<br>" +
          parms[1].marker +
          parms[1].seriesName +
          "：" +
          parms[1].value +
          "万人次" +
          "<br>" +
          parms[2].marker +
          parms[2].seriesName +
          "：" +
          parms[2].value +
          "万人次";

        return str;
      },
    },
    legend: {
      right: "10%",
      textStyle: {
        color: "#fff", // 设置图例文字的颜色为红色
      },
      data: ["2023年", "2024年", "2025年"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          type: "dashed", // 将横坐标的轴线设置为虚线
        },
      },
      axisLabel: {
        formatter: function (value, index) {
          if (index == "14") {
            return `{a|${value}(腊月二十九)}`;
          } else if (index == "22") {
            return `{b|${value}(正月初八)}`;
          } else if (index == "30") {
            return `{c|${value}(正月十六)}`;
          } else {
            return value;
          }
        },
        rich: {
          a: {
            color: "#FCFD00",
          },
          b: {
            color: "#FCFD00",
          },
          c: {
            color: "#FCFD00",
          },
        },
        interval: function (index, value) {
          // 仅显示索引为 0、2、4、6、8 的横坐标标签
          return [0, 5, 10, 14, 18, 22, 24, 30, 34, 39].includes(index);
        },
        textStyle: {
          color: "white",
        },
      },

      data: xdata,
    },
    yAxis: {
      type: "value",
      name: "单位/万人次",
      min: 0,
      max: 200,

      splitLine: {
        show: true, // 不显示 y 轴分割线
        lineStyle: {
          type: "dashed", // 设置为虚线
        },
      },
      axisLabel: {
        // 坐标轴刻度标签相关配置
        color: "#fff",
        fontSize: 16,
        formatter: "{value}",
      },
      // 修改name的颜色
      nameTextStyle: {
        color: "#fff", // 设置名称的颜色为红色
        padding: [0, 0, 0, 0],
        fontSize: 16,
        fontWeight: 500,
      },
    },
    series: [
      {
        name: "2023年",
        type: "line",
        // stack: 'Total',
        data: ydata1,
        itemStyle: {
          normal: {
            color: "#43CB44", // 设置 Email 系列的线条颜色为绿色
          },
        },
        symbol: function (params, data) {
          if (
            data.dataIndex === 14 ||
            data.dataIndex === 22 ||
            data.dataIndex === 30
          ) {
            return "emptyCircle";
          }
          return "none";
        },
        label: {
          show: function (params) {
            return params === line11 || params === line12 || params === line13;
          },
          formatter: " {c}",
          color: "#43CB44",
        },
        symbolSize: 10,
      },
      // {
      //     name: '2023年',
      //     data: [',', ',', ',', 134, 90, 230, 210],
      //     type: 'line',
      //     itemStyle: {
      //         normal: {
      //             color: '#43CB44' // 设置 Email 系列的线条颜色为绿色
      //         }
      //     },
      //     lineStyle: {
      //         type: "dashed",
      //         width: 2,
      //     },

      //     symbol: function (params) {
      //         if (params === 230) {
      //             return 'emptyCircle';
      //         }
      //         return 'none';
      //     },
      //     label: {
      //         show: function (params) {
      //             return params === 230;
      //         },
      //         formatter: ' {c}',
      //         color: 'green'
      //     },
      //     symbolSize: 10,
      // },
      {
        name: "2024年",
        type: "line",
        // stack: 'Total',
        data: ydata2,
        itemStyle: {
          normal: {
            color: "#FF7C81", // 设置 Email 系列的线条颜色为绿色
          },
        },
        symbol: function (params, data) {
          if (
            data.dataIndex === 14 ||
            data.dataIndex === 22 ||
            data.dataIndex === 30
          ) {
            return "emptyCircle";
          }
          return "none";
        },
        label: {
          show: function (params) {
            return params === line21 || params === line22 || params === line23;
          },
          formatter: " {c}",
          color: "#FF7C81",
        },
        symbolSize: 10,
      },
      // {
      //     name: '2024年',
      //     type: 'line',
      //     lineStyle: {
      //         type: "dashed"
      //     },
      //     itemStyle: {
      //         normal: {
      //             color: '#FF7C81' // 设置 Email 系列的线条颜色为绿色
      //         }
      //     },
      //     symbol: function (params) {
      //         if (params === 330) {
      //             return 'emptyCircle';
      //         }
      //         return 'none';
      //     },
      //     label: {
      //         show: function (params) {
      //             return params === 330;
      //         },
      //         formatter: ' {c}',
      //         color: '#FF7C81'
      //     },
      //     symbolSize: 10,
      //     data: [',', ',', ',', 234, 290, 330, 310]
      // },
      {
        name: "2025年",
        type: "line",
        // stack: 'Total',
        data: ydata3,
        itemStyle: {
          normal: {
            color: "#82C0FF", // 设置 Email 系列的线条颜色为绿色
          },
        },
        symbol: function (params, data) {
          if (
            data.dataIndex === 14 ||
            data.dataIndex === 22 ||
            data.dataIndex === 30
          ) {
            return "emptyCircle";
          }
          return "none";
        },
        label: {
          show: function (params) {
            return params === line31 || params === line32 || params === line33;
          },
          formatter: " {c}",
          color: "#82C0FF",
        },
        symbolSize: 10,
      },
      {
        name: "2025年",
        type: "line",
        lineStyle: {
          type: "dashed",
        },
        itemStyle: {
          normal: {
            color: "#82C0FF", // 设置 Email 系列的线条颜色为绿色
          },
        },
        symbol: function (params, data) {
          if (
            data.dataIndex === 14 ||
            data.dataIndex === 22 ||
            data.dataIndex === 30
          ) {
            return "emptyCircle";
          }
          return "none";
        },
        label: {
          show: function (params) {
            return params === line31 || params === line32 || params === line33;
          },
          formatter: " {c}",
          color: "#82C0FF",
        },
        symbolSize: 10,
        data: ydata4,
      },
    ],
  };
  zhexian.setOption(option);
}

onMounted(() => {
  springQuantitySentChart().then((res) => {
    let a = res.result;
    console.log(a, "a");
    a.map((item) => {
      return xdata.value.push(convertDateFormat(item.cyDate));
    });
    a.map((item) => {
      return ydata1.value.push(item.val23);
    });
    a.map((item) => {
      return ydata2.value.push(item.val24);
    });
    a.map((item) => {
      return dataList.value.push(item.val25);
    });
    a.map((item) => {
      if (!item.forecast) {
        return ydata3.value.push(item.val25);
      }
    });
    a.map((item) => {
      if (item.forecast) {
        return ydata4.value.push(item.val25);
      }
    });
    ydata4.value.unshift(ydata3.value[ydata3.value.length - 1]);
    for (let i = 0; i < ydata3.value.length - 1; i++) {
      // 在这里添加你需要执行的代码
      console.log(ydata3.value[i]);
      ydata4.value.unshift(",");
    }
    const line11 = ydata1.value[14];
    const line12 = ydata1.value[22];
    const line13 = ydata1.value[30];
    const line21 = ydata2.value[14];
    const line22 = ydata2.value[22];
    const line23 = ydata2.value[30];
    const line31 = dataList.value[14];
    const line32 = dataList.value[22];
    const line33 = dataList.value[30];

    init(
      xdata.value,
      ydata1.value,
      ydata2.value,
      ydata3.value,
      ydata4.value,
      line11,
      line12,
      line13,
      line21,
      line22,
      line23,
      line31,
      line32,
      line33
    );
  });
});
</script>

<style lang="scss" scoped>
.box {
  width: 1880px;
  height: 266px;
}
</style>
